<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div{width:100px; background-color: #45dfff; }
	</style>
	<script src="jquery-1.10.1.min.js"></script>
	<script>
/*	$()下的常用方法
		【都是剪切操作】
		insertBefore(): (前者)掷于...(后者)之前  				before() :让(前者)的前面是(后者)
		insertAfter() : (前者)掷于...(后者)之后 				after()  :让(前者)的后面是(后者)
	
		上面还是兄弟节点的关系，下面就是父子级的关系

		appendTo()    : (前者)掷于...(后者)内部的最后			append() :让(前者)内部最后是(后者)
		prependTo()   : (前者)掷于...(后者)内部的最前 			prepend():让(前者)内部最前是(后者)

		区别：后续操作变了
*/
	$(function () {
		// $('span').insertBefore( $('div') );			//把span放在div之前  			(移动前者)
		// $('div').before( $('span') );				//让div的前面是span			(指定位置关系)

		// $('div').insertAfter( $('span') );			//把div放在span之后				(移动前者)
		// $('span').after( $('div') );					//让span的后面是div			(指定位置关系)

		// $('span').appendTo( $('div') );				//把span放在div内部最后			(移动前者)
		// $('div').append( $('span') );				//让div内部的最后是span		(指定位置关系)

		// $('span').prependTo( $('div') );				//把span放在div内部最前			(移动前者)
		// $('div').prepend( $('span') );				//让div内部的最前是span		(指定位置关系)

		//后续操作的区别，如：
		$('span').insertBefore( $('div') ).css('background-color', 'red');			//操作的对象是前者span
		// $('div').before( $('span') ).css('background-color', 'red');				//操作的对象也是前者div
	})
	</script>
</head>
<body>
	<div>div<p>p</p></div>
	<span>span</span>
</body>
</html>